<!DOCTYPE html>
<html>
<head>
	<title>135k小程序案例</title>

	<link rel="stylesheet" href="./css/index.css">
	<link rel="stylesheet" href="./css/swiper.min.css">
</head>
<body id="content">
	<!-- 顶部logo -->
	<div class="header" style="background-color:#fff;">
		<header>
			<div class="logo">
				<img src="./img/135_01_03.png" alt="">
			</div>
			<ul class="right">
				<li style="width:auto;padding-top:10px">
					<img src="./img/135_02_03.png" alt="">
				</li>
			</ul>
		</header>
	</div>
	<!-- 顶部导航 -->
	<div class="nav" style="border-bottom:1px solid #ffffff;">
		<nav>
			<ul class="left nav_left">
				<li class="active">
					<span>首页</span>
				</li>
				<li>
					<span>诚邀加盟</span>
				</li>
				<li>
					<span>官方制定</span>
				</li>
				<li>
					<span>解决方案</span>
				</li>
				<li>
					<span>案例</span>
				</li>
				<li>
					<span>产品介绍</span>
				</li>
				<li>
					<span>关于我们</span>
				</li>
				<li>
					<span>联系我们</span>
				</li>
			</ul>
			<ul class="right">
				<li>登录</li>
			</ul>
		</nav>
	</div>
	<!-- 大背景图 -->
	<div class="k_banner">
		<div class="k_banner_info">
			<img src="./img/135_03_07.png">
			<p class="k_p1">微信小程序元年，千亿市场等你来</p>
			<p class="k_p2">In the first year of WeChat's program, the 100 Billion Market is waiting for you.</p>
			<span class="k_p3">点击报名</span>
		</div>	
	</div>
	<!-- 小程序案例 -->
	<div class="k_anli">
		<div class="k_title">
			<img src="./img/135_04_11.png">
		</div>
		<div class="anli">
			<div class="swiper-container" id="anli_swiper" >
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<!-- 小程序 -->
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
					</div>
					<div class="swiper-slide">
						<!-- 小程序 -->
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
					</div>
					<div class="swiper-slide">
						<!-- 小程序 -->
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
					</div>
					<div class="swiper-slide">
						<!-- 小程序 -->
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
						<div class="xcx_item"></div>
					</div>
				</div>
				<!-- Add Pagination -->

		    	<input class="btn btn-gray button-prev" name="" type="button" value="上一页">
				<input class="btn btn-gray button-next" name="" type="button" value="下一页">
			</div>
		</div>
	</div>
	<div class="hr_icon" style="background-color:#d83536;">
		<div class="icon">
			<img src="./img/135_05_15.png" alt="">
		</div>
	</div>
	<!-- 底部 -->
	<div class="k_footer footer">
		<footer class="clearfix">
			<div class="k_title">
				<ul class="clearfix">
					<li>
						<img src="./img/135_06_19.png">
						<p>029-8626-9759</p>
					</li>
					<li>全方案的购买咨询</li>
					<li>精准的产品推荐</li>
					<li>专业支持的售后咨询</li>
					<li>电商业务开展咨询</li>
					<li>快速开发小程序</li>
				</ul>
			</div>
			<!-- <div class="foot one">
				<span>帮助</span>
				<ul>
					<li>网站赚钱技巧</li>
					<li>活动指南</li>
					<li>微营销</li>
				</ul>
			</div>
			<div class="foot two">
				<span>解决方案</span>
				<ul>
					<li>移动电商</li>
					<li>企业分销</li>
					<li>移动金融</li>
					<li>微信定制</li>
				</ul>
			</div> -->
			<div class="foot five k_five">
				<ul>
					<li> <p>微信二次开发</p> <i class="k_1"></i> </li>
					<li><p>企业网上商城</p> <i class="k_1"></i> </li>
					<li><p>SEO优化</p> <i class="k_1"></i> </li>
					<li><p>企业门户网站建设</p> <i class="k_1"></i> </li>
				</ul>
			</div>
			<div class="foot four">
				<img src="./img/135k_03.png">
				<span>公司官网</span>
			</div>
			<div class="foot five">
				<ul>
					<li>
						<i class="i_1"></i>
						<p>029-8626-3319</p>
					</li>
					<li>
						<i class="i_0"></i>
						<p>029-8626-9759(售后)</p>
					</li>
					<li>
						<i class="i_2"></i>
						<p>029-8626-3319</p>
					</li>
					<li>
						<i class="i_3"></i>
						<p>029-8626-3319</p>
					</li>
				</ul>
			</div>
		</footer>
		<div class="copyright">
			<p>
				<a href="#">西安总部：陕西省西安市未央区朱宏路与凤城八路十字东南角鼎正大都城1单元1303室</a>
			</p>
			<a href="#">全国统一服务热线：029-8579-6550 Copyright © 2008-2016 www.4hl.cn 网站名称 西安数度网络科技有限公司 备案号：陕ICP备14003351号</a>
		</div>
	</div>
	<script src="./js/swiper.min.js"></script>
	<script src="./js/jquery.min.js"></script>
	<script src="./js/jquery.nicescroll.min.js"></script>
	<script>
		// 滚动条
		$('#content').niceScroll({
			cursorcolor: "#ffab26",//#CC0071 光标颜色
			cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
			touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
			cursorwidth: "5px", //像素光标的宽度
			cursorborder: "0", // 游标边框css定义
			cursorborderradius: "5px",//以像素为光标边界半径
			autohidemode: false, //是否隐藏滚动条
			zindex: '100'
		});

		// 初始化案例
		var mySwiper = new Swiper ('#anli_swiper', {
			simulateTouch: false,//禁止鼠标模拟
			speed: 500,
	        // 如果需要前进后退按钮
	        nextButton: '.button-next',//对应"下一题"按钮的class
	        prevButton: '.button-prev',//对应"上一题"按钮的class
	        pagination: '.pagination',//分页容器的css选择器
	        paginationType : 'custom',//自定义-分页器样式类型（前提）
	        //设置自定义分页器的内容
	        // paginationCustomRender: function (swiper, current, total) {
	        //     var _html = '';
	        //     for (var i = 1; i <= total; i++) {
	        //       if (current == i) {
	        //         _html += '<li class="swiper-pagination-custom active">' + i + '</li>';
	        //       }else{
	        //         _html += '<li class="swiper-pagination-custom">' + i  + '</li>';
	        //       }
	        //     }
	        //     return _html;//返回所有的页码html
	        // }
	    })
	    //给每个页码绑定跳转的事件   
	    var num = 0;
	    $('.button-prev').on('click',function(){  
	    	console.log(num)
      		if (num == 0) {
	      		mySwiper.slideTo($(".swiper-slide").length-1, 500, false);//切换到第一个slide，速度为1秒
	      		num = $(".swiper-slide").length-1
	      		console.log(num)
	      	}
	      	if(num > 0){
	      		console.log(num)
	      		mySwiper.slideTo(--num, 500, false);//切换到第一个slide，速度为1秒
	      	}
	    })
	    $('.button-next').on('click',function(){
		  	if (num < $(".swiper-slide").length-1) {
  				mySwiper.slideTo(++num, 500, false);//切换到第一个slide，速度为1秒
		  	}
		  	else if(num == $(".swiper-slide").length-1){
		  		num = 0
		  		mySwiper.slideTo(num, 500, false);//切换到第一个slide，速度为1秒
		  	}
	  		console.log(num)
	    })
	</script>
</body>
</html>